<template>
  <div
    v-if="+examInitModel === 1 && !isChangeExamModel"
    :class="['time-wrapp m-r-16', examType === 'common' ? 'time-consuming-common' : '']"
  >
    <template v-if="examType === 'common'">
      <span>用时：</span>
      <span>{{ timeConsumingText }}</span>
    </template>
    <template v-else>
      <el-tooltip v-if="showTimeBtn" class="mt8" effect="dark" content="展开用时时间" placement="bottom">
        <span>
          <i class="time-icon" @click="switchTimeBtn"></i>
        </span>
      </el-tooltip>
      <el-tooltip v-else effect="dark" content="收起用时时间" placement="bottom">
        <span @click="switchTimeBtn" class="head-btn time-countdown-wrap">
          <span>用时：</span>
          <span>{{ timeConsumingText }}</span>
        </span>
      </el-tooltip>
    </template>
  </div>
</template>

<script>
export default {
  name: 'exam-time-consuming',
  props: {
    examType: {
      type: String,
      default: ''
    },
    isShowReport: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showTimeBtn: false,
      timer: null
    }
  },
  computed: {
    // 已提交过试卷
    isSubmitedPaper() {
      return this.$store.state.exam.isSubmitedPaper
    },
    examInitModel() {
      return this.$store.state.exam.examInitModel
    },
    // 用时文案
    timeConsumingText() {
      return this.$store.getters['exam/timeConsumingText'] || '00:00:00'
    },
    // 考试模式  1- 练习模式  2 - 考试模式 3 - 背题模式
    examModel() {
      return this.$store.state.exam.examModel
    },
    query() {
      return this.getQuery(location.search)
    },
    // 试卷时长
    duration() {
      let { examQuestion } = this.$store.state.exam
      if (!this.isObject(examQuestion)) {
        return 0
      }
      let { duration } = examQuestion
      if (isNaN(duration - 0)) {
        return 0
      }
      return (duration - 0) * 60
    },

    // 是否从考试切换过模式
    isChangeExamModel() {
      return this.$store.getters['exam/isChangeExamModel'] || false
    }
  },
  watch: {
    isChangeExamModel(val) {
      if (val) {
        this.clear()
      }
    },
    isShowReport(val) {
      if (val) {
        this.clearTimer()
        return
      }
      this.init()
    },
    examModel(newVal, oldVal) {
      if (+newVal === 1 && +oldVal === 2) {
        this.reload()
      }

      if (+newVal === 3 && +oldVal === 1) {
        this.clearTimer()
      }

      if (+newVal === 1 && +oldVal === 3) {
        this.init()
      }
    }
  },
  mounted() {
    if (this.isShowReport) return
    this.init()
  },
  methods: {
    // 清除记录，并重新开始计时
    reload() {
      this.clear()
      this.init()
    },
    // 清除记录
    clear() {
      this.clearTimer()
      this.$store.commit('exam/SET_TIME_CONSUMING', 0)
    },

    // 初始化，会从缓存中获取默认用时 - 继续
    init() {
      let {
        isSubmitedPaper,
        isChangeExamModel,
        examInitModel,
        duration,
        examModel,
        query: { exam_id }
      } = this
      if (+examModel === 3 || isChangeExamModel || isSubmitedPaper) return
      this.clearTimer()
      // 默认设置一次用时，防止默认展示的不对
      let timeConsumingD = Number(storage.get(`timeConsuming_` + exam_id) || 0)
      this.$store.commit('exam/SET_TIME_CONSUMING', timeConsumingD)
      // 创建定时器
      this.timer = setInterval(() => {
        // 从缓存获取做题用时
        let timeConsuming = Number(storage.get(`timeConsuming_` + exam_id) || 0)
        const maxTime = 24 * 3600 - 1
        // const maxTime = 59
        if (timeConsuming >= maxTime) {
          this.clearTimer()
          return
        }
        // 更新做题用时
        this.$store.commit('exam/SET_TIME_CONSUMING', ++timeConsuming)
        if (timeConsuming >= duration && +examInitModel === 2) {
          this.$emit('timeOut', true)
          this.clearTimer()
        }
      }, 1000)
    },

    // 清除定时器 - 暂停
    clearTimer() {
      clearInterval(this.timer)
      this.timer = null
    },

    // 切换状态
    switchTimeBtn() {
      this.showTimeBtn = !this.showTimeBtn
    }
  }
}
</script>

<style scoped>
.head-btn {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 50px;
  background-color: #fff;
  color: #447dff;
  font-size: 14px;
  cursor: pointer;
}
.time-icon {
  display: inline-block;
  margin-top: 8px;
  width: 20px;
  height: 18px;
  background-image: url('');
  background-size: contain;
  background-repeat: no-repeat;
}
.time-consuming-common {
  height: 26px;
  font-size: 18px;
  font-weight: 600;
  color: #fcff00;
  line-height: 26px;
  margin-right: 20px;
}
</style>
